<template>
    <div class='fillInformation'>
        <div class='fillTop'>
            <h3>填写信息，让我们专业顾问联系您<i></i></h3>
        </div>
        <div class='fillMain'>
            <div class='fillMainBox'>
                <div class='fillMainAlignCenter'>
                    <div class='container'>
                        <div class='textareaBox'>
                            <el-input
                                type="textarea"
                                :rows="7"
                                resize='none' 
                                maxlength="300"
                                v-model="params.content"
                                prefix-icon="iconfont icon-bianji"
                                placeholder="请输入您的留言内容">
                            </el-input>
                        </div>
                        <div class='form'>
                            <el-input
                                maxlength="6"
                                v-model="params.name"
                                placeholder="请输入您的姓名"
                                prefix-icon="iconfont icon-yonghu"
                                >
                            </el-input>
                            <el-input
                                v-model="params.mobile"
                                class='inputSearch'
                                placeholder="请输入您的回访手机号"
                                prefix-icon="iconfont icon-guanyuwomen-shoujiduan"
                                >
                            </el-input>
                            <p>视纪影视郑重承诺，我们将严格保护您提交的资料信息</p>
                        </div>
                    </div>
                    <p class='moreLine'>
                        <a @click='submit' class='more' href="javascript:;">提交留言</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import { ajax } from "@/api";
export default {
    name:'fillInformation',
    data(){
        return {
            params:{
                type:'官网留言',
                content:'',
                pictures:'[]',
                name:'',
                mobile:'',
                token:''
            }
        }
    },
    methods:{
            //提交反馈
            submit(){
                if(!this.params.content){
                    this.$message.warning('提交内容不能为空');
                    return false;
                }
                if(this.params.content.length < 4){
                    this.$message.warning('提交内容不能少于4个字');
                    return false;
                }
                if(!this.params.name){
                    this.$message.warning('你的姓名不能为空');
                    return false;
                }

                if(!this.isMobileNumber(this.params.mobile)){
                    return false;
                }
                ajax('feedback',this.params).then((json) => {
                    console.log(json);
                    if(json.data.code === 200){
                        this.$message.success('提交成功');
                        this.params.name = '';
                        this.params.content = '';
                        this.params.mobile = '';
                    }else{
                        this.$message.error(json.message);
                    }
                });

            },
            isMobileNumber(phone) {
                var flag = false;

                var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[4-9]{1})|(18[0-9]{1})|(199))+\d{8})$/;
                if (phone == '') {
                    // console.log("手机号码不能为空");
                   this.$message.warning("手机号码不能为空！");
                } else if (phone.length != 11) {
                    //console.log("请输入11位手机号码！");
                   this.$message.warning("请输入11位手机号码！");
                } else if (!myreg.test(phone)) {
                    //console.log("请输入有效的手机号码！");
                   this.$message.warning("请输入有效的手机号码！");
                } else {
                    flag = true;
                }
                
                return flag;
            }
    }

}
</script>


<style lang="less" scoped>
.fillInformation{
    width: 100%;
    .fillTop{
        background: #3ca7fc;
        text-align: center;
        padding: 1.5rem 0;
        h3{
            margin: 0 auto;
            font-weight: 400;
            font-size: 20px;
            color: #fff;
            width: 321px;
            position: relative;
            i{
                display: block;
                width: 1rem;
                height: 1rem;
                transform: rotate(44deg);
                position: absolute;
                left: 50%;
                bottom: -2rem;
                background: #3ca7fc;
            }
        }
    }
    .fillMain{
        width: 100%;
        height: 456px;
        background: url('../../../assets/image/footer/fillInfo.png') center center no-repeat;
        background-size: cover;
        .fillMainBox{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            background: rgba(108, 106, 104, 0.85);
            .fillMainAlignCenter{
                width: 100%;
            }
            .container{
                width: 812px;
                min-width: 812px;
                margin: 0 auto;
                display: flex;
                .textareaBox{
                    width: 50%;
                    padding: 0 1rem;
                }

                .form{
                    width: 50%;
                    padding: 0 2rem;
                    .inputSearch{
                        margin: 1.5rem 0 .6rem 0;
                    }

                    p{
                        margin: 0;
                        color: #fff;
                        font-size: 15px;
                        line-height: 1.4rem;
                    }
                }
                
            }
            .moreLine{
                    text-align: center;
                    margin-top: 43px;
                    .more{
                        display: inline-block;
                        padding: 0.9rem 4rem;
                        background: #3ca7fc;
                        color: #fff;
                        text-align: center;
                    }
                }
        }
    }
}
</style>
